<template>
  <div class="vector-chart">
    <ECharts :options="chartOptions" :height="height" :width="width" />
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
import ECharts from "@/components/ECharts/index.vue";
import type { VectorDataItem } from "@/api/hmi/chart.api";
import type { EChartsCoreOption } from "echarts/core";

interface Props {
  /** 矢量数据列表 */
  data: VectorDataItem[];
  /** 图表宽度 */
  width?: string;
  /** 图表高度 */
  height?: string;
  /** 图表标题 */
  title?: string;
}

const props = withDefaults(defineProps<Props>(), {
  width: "100%",
  height: "600px",
  title: "矢量图",
});

// 计算图表配置
const chartOptions = computed<EChartsCoreOption>(() => {
  const { data } = props;

  if (!data || data.length === 0) {
    return {
      title: {
        text: "暂无数据",
        left: "center",
        top: "center",
      },
    };
  }

  // 准备极坐标数据
  const seriesData = data.map((item) => ({
    name: item.Name,
    value: [item.Angle, item.Measure], // [角度, 幅值]
    alias: item.Alias,
  }));

  const legendData = data.map((item) => item.Name);

  return {
    title: {
      text: props.title,
      left: "center",
    },
    tooltip: {
      trigger: "item",
      formatter: (params: any) => {
        const dataItem = data[params.dataIndex];
        return `
          <div>
            <strong>${dataItem.Name}</strong><br/>
            别名: ${dataItem.Alias}<br/>
            幅值: ${dataItem.Measure}<br/>
            角度: ${dataItem.Angle}°
          </div>
        `;
      },
    },
    legend: {
      data: legendData,
      top: 30,
      type: "scroll",
    },
    polar: {
      radius: ["10%", "70%"],
    },
    angleAxis: {
      type: "value",
      startAngle: 90,
      min: 0,
      max: 360,
      clockwise: false,
      axisLabel: {
        formatter: "{value}°",
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "#E4E7ED",
        },
      },
    },
    radiusAxis: {
      type: "value",
      min: 0,
      axisLabel: {
        show: true,
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "#E4E7ED",
        },
      },
    },
    series: [
      {
        name: "矢量数据",
        type: "scatter",
        coordinateSystem: "polar",
        data: seriesData,
        symbolSize: 8,
        itemStyle: {
          color: (params: any) => {
            const colors = [
              "#409EFF",
              "#67C23A",
              "#E6A23C",
              "#F56C6C",
              "#909399",
              "#C71585",
              "#FF6347",
              "#32CD32",
            ];
            return colors[params.dataIndex % colors.length];
          },
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowColor: "rgba(0, 0, 0, 0.3)",
          },
        },
      },
    ],
  };
});
</script>

<style scoped>
.vector-chart {
  width: 100%;
  height: 100%;
}
</style>
